<template>
<div style="text-align: left">患者信息:
    <span style="font-size: 16px;background-color: beige;color: #42b983">
      姓名:{{info.realName}}
      病历号:{{info.caseNumber}}
  年龄:{{info.age}}
  性别:{{info.sex}}

  </span>
  </div>
  <hr/>
  <div style="text-align: left">病历首页</div>
  <hr/>
  <div style="text-align: left">病案首页</div>
  <el-form  label-width="auto" :model="formRecord" style="max-width: 80%">
    <el-form-item label="主诉">
      <el-input v-model="formRecord.readme" />
    </el-form-item>
    <el-form-item label="现病史">
      <el-input v-model="formRecord.present" />
    </el-form-item>
    <el-form-item label="现病治疗史">
      <el-input v-model="formRecord.presentTreat" />
    </el-form-item>
    <el-form-item label="既往史">
      <el-input v-model="formRecord.history" />
    </el-form-item>
    <el-form-item label="过敏史">
      <el-input v-model="formRecord.allergy" />
    </el-form-item>
    <el-form-item label="体格检查">
      <el-input v-model="formRecord.physique" />
    </el-form-item>
    <el-form-item label="诊断">
      <el-checkbox-group style="width: 100%" v-model="formRecord.diagnosisList">
        <el-table :data="diseaseList" style="width: 100%">


            <el-table-column label="选择">
              <template #default="{ row }">
              <el-checkbox
                  :value="row.diseaseicd+'-'+row.diseaseName+'-'+row.diseaseCategory"
                  name="diagnosisList">
              </el-checkbox>
            </template>
            </el-table-column>


          <el-table-column prop="diseaseCode" label="疾病辅助编码"/>
          <el-table-column prop="diseaseName" label="疾病名称"/>
          <el-table-column prop="diseaseicd" label="国际ICD编码"/>
          <el-table-column prop="diseaseCategory" label="疾病所属分类"/>
        </el-table>
        <el-button type="primary">添加</el-button>
        <el-button type="success">删除</el-button>

      </el-checkbox-group>

    </el-form-item>
    <el-form-item label="检查|检验建议">
      <el-input v-model="formRecord.proposal" />
    </el-form-item>
    <el-form-item label="注意事项">
      <el-input v-model="formRecord.careful" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveMeicalRecord">保存病历</el-button>
      <el-button type="success">清空病历</el-button>
    </el-form-item>

  </el-form>
</template>

<script setup>
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
//获得创建路由对象，获得路由参数
const route =new useRoute()
//定义病人信息数据
const info=reactive({
  realName:'',
  caseNumber:'',
  age:'',
  sex:''
});

let id=0;
if(sessionStorage.getItem("sessionData")){
  // 获取sessionStorage
  const sessionData = JSON.parse(sessionStorage.getItem('sessionData'));
  id=sessionData.id;
  //sessionStorage.removeItem("sessionData");
}

/*定义表单数据*/
const formRecord=reactive({
  id:'',
  registerId:id,
  readme:'',
  present:'',
  presentTreat:'',
  history:'',
  allergy:'',
  physique:'',
  proposal:'',
  careful:'',
  diagnosisList:[],
  diagnosis:'',
  cure:''


});


//定义疾病列表
const diseaseList=ref([]);
onMounted(()=>{
  getRegisterInfo();
  loadDiseaseList();
});
/*定义函数加载病人信息*/
function getRegisterInfo(){

  axios.get("http://localhost/his/queryRegiserInfo/"+id)
      .then((response)=>{
        info.realName=response.data.realName;
        info.caseNumber=response.data.caseNumber;
        info.age=response.data.age;
        info.sex=response.data.gender	;
        //删除sessionStorage对象中保存的键值对

      })
      .catch((error)=>{
        console.log(error);
  });
}

/*加载疾病列表*/
function loadDiseaseList(){
  axios.get("http://localhost/his/queryDiseaseList")
      .then((response)=>{
        diseaseList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      });
}

/*发送ajax请求保持病历信息*/
function saveMeicalRecord(){
  formRecord.diagnosis=formRecord.diagnosisList.join(",")
  axios.post("http://localhost/his/saveMedicalRecord",formRecord)
      .then((response)=>{
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      });
}


</script>

<style scoped>

</style>